<template>
  <div class="change-password-container">
    <el-button
      class="back-button"
      type="primary"
      icon="ArrowLeft"
      @click="goBack"
    >
      返回
    </el-button>

    <el-card class="password-card">
      <template #header>
        <div class="card-header">
          <span>修改密码</span>
        </div>
      </template>
      <el-form
        :model="passwordForm"
        :rules="rules"
        ref="formRef"
        label-position="top"
      >
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            placeholder="请输入新密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { httpClient } from "@/libs/http-client";

const router = useRouter();
const formRef = ref<FormInstance>();

const passwordForm = reactive({
  newPassword: "",
  confirmPassword: "",
});

const validatePass = (rule: any, value: string, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (passwordForm.confirmPassword !== "") {
      if (formRef.value) {
        formRef.value.validateField("confirmPassword", () => null);
      }
    }
    callback();
  }
};

const validatePass2 = (rule: any, value: string, callback: any) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== passwordForm.newPassword) {
    callback(new Error("两次输入密码不一致!"));
  } else {
    callback();
  }
};

const rules: FormRules = {
  newPassword: [
    { validator: validatePass, trigger: "blur" },
    { min: 6, message: "密码长度不能小于6个字符", trigger: "blur" },
  ],
  confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
};

const submitForm = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      console.log("修改密码:", passwordForm.newPassword);
      httpClient
        .put("/userInfo/updatePassword", null, {
          params: {
            password: passwordForm.newPassword,
          },
        })
        .then((data) => {
          console.log("密码修改成功:", data);
          ElMessage.success("密码修改成功");
        })
        .catch((error) => {
          console.error("密码修改失败:", error);
          ElMessage.error("密码修改失败");
        });

      router.push("/dialogue");
    } else {
      console.log("表单验证失败", fields);
    }
  });
};

const goBack = () => {
  router.back();
};
</script>

<style scoped>
.change-password-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
}

.password-card {
  width: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-button {
  position: absolute;
  left: 20px;
  top: 20px;
}
</style>
